<template>
    <div class="edu-page-warp">
        <div class="edu-page-title">{{ $t('message.filterCondition') }}</div>
        <el-card shadow="never" body-style="padding: 24px;">
            <el-form ref="queryForm" :model="queryForm" label-width="80px" class="bg-white pd-12px">
                <el-row :gutter="20" style="height: 50px;">
                    <el-col :span="6">
                        <el-form-item label="异动大类:" :label-width="formLabelWidth">
                            <el-select v-model="queryForm.classId">
                                <el-option
                                    v-for="item in categories"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="异动类型:" :label-width="formLabelWidth">
                            <el-input
                                v-model="queryForm.typeName"
                                placeholder="请输入"
                                @keyup.enter.native="onSubmit"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <div class="empty-box"></div>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item class="float-right">
                            <el-button @click="reset">{{ $t('message.reset') }}</el-button>
                            <el-button type="primary" @click="onSubmit">{{ $t('message.filter') }}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <div class="edu-page-title mg-top">学籍异动类型扩展</div>
        <el-card shadow="never" body-style="padding: 24px;">
            <el-row class="border-bottom" style="height:56px;">
                <el-col :span="24">
                    <div class="float-right">
                        <el-button type="primary" @click="addItem">新增</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-table :data="data" size="mini" @selection-change="handlerSelectionChange">
                <el-table-column type="selection" stripe/>
                <el-table-column type="index" label="序号" :index="indexMethod"/>
                <el-table-column label="异动大类">
                    <template slot-scope="scope">{{ scope.row.className }}</template>
                </el-table-column>
                <el-table-column label="异动类型">
                    <template slot-scope="scope">{{ scope.row.typeName }}</template>
                </el-table-column>
                <el-table-column label="学生是否申请">
                    <template slot-scope="scope">{{ scope.row.usedByStudent | yesOrNo}}</template>
                </el-table-column>
                <el-table-column label="培养层次">
                    <template
                        slot-scope="scope"
                    >{{ scope.row.studentType | getStudentCategoryText(studentCategorys) }}</template>
                </el-table-column>
                <el-table-column label="是否设置异动原因">
                    <template slot-scope="scope">{{ scope.row.isSetReason | yesOrNo}}</template>
                </el-table-column>
                <el-table-column label="操作" width="90">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="editItem(scope.row)">编辑</el-button>
                        <el-button type="text" size="mini" @click="deleteItem(scope.row)">删除</el-button>
                        <!-- <el-button type="text" @click="editTask(scope.row)" size="mini">编辑</el-button> -->
                    </template>
                </el-table-column>
            </el-table>

            <div class="edu-pagination">
                <div class="float-right">
                    <el-pagination
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[20,50,100,500,1000]"
                        :page-size="queryForm.pageSize_"
                        :total="totalCount"
                        layout="total, sizes, prev, pager, next, jumper"
                        style="float: right;margin:10px 60px 0 0;"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </el-card>
        <!--删除弹窗-->
        <el-dialog
            :title.sync="deleteDialog.dialogTitle"
            :visible.sync="deleteDialog.dialogVisible"
            width="30%"
        >
            <span>确定删除？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deleteDialog.dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handlerDeleteIem">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import * as API from "common/src/api/studentStatus";
import utils from "common/src/utils/utils";
import { yesOrNo } from "common/src/filters/commonFilter";
import { queryDic } from "common/src/api/dictionary";
export default {
    name: "statusCategoryExt",
    data() {
        return {
            loading: false,
            formLabelWidth: "100px",
            queryForm: {
                pageNum_: 1,
                pageSize_: 20,
                classId: "",
                typeName: ""
            },
            studentCategorys: [],
            categories: [],
            data: [],
            totalCount: 0,
            selectedItems: [],
            deleteDialog: {
                dialogTitle: "删除",
                dialogVisible: false,
                data: {}
            }
        };
    },
    mounted() {
        this.initOptions();
        this.initData();
    },
    methods: {
        async initData() {
            let params = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_PYCC"]
            };
            let {
                code,
                data: { X_PYCC }
            } = await queryDic(params);
            if (code === 200) {
                this.studentCategorys = X_PYCC;
            }
            this.onSubmit();
        },
        initOptions() {
            API.getStatusCategoriesNoPage().then(response => {
                let { code, data } = response;
                if (code === 200) {
                    this.categories = data.map(item => ({
                        label: item.name,
                        value: item.id + ""
                    }));
                }
            });
        },

        onSubmit() {
            API.getStatusCategoryExts(this.queryForm).then(response => {
                if (response.code === 200) {
                    this.data = response.data.list;
                    this.totalCount = response.data.total_;
                } else throw response.code;
            });
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val;
            this.onSubmit();
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val;
            this.onSubmit();
        },
        reset() {
            this.queryForm.classId = "";
            this.queryForm.typeName = "";
            this.queryForm.pageNum_ = 1;
            this.queryForm.pageSize_ = 20;
            this.onSubmit();
        },
        addItem() {
            this.$router.push({
                name: "addStatusCategoryExt"
            });
        },
        editItem(row) {
            this.$router.push({
                name: "addStatusCategoryExt",
                params: { typeId: row.id }
            });
        },
        deleteItem(row) {
            API.deleteStatusCategoryExt(row.id).then(response => {
                if (response.code === 200) {
                    this.onSubmit();
                }
            });
        },
        isAllKeyEmpty(obj = {}) {
            return !!Object.values(obj).join("");
        },
        indexMethod(index) {
            return index + 1;
        }
    },
    filters: {
        yesOrNo,
        getStudentCategoryText(value, list) {
            if (!value) {
                return "";
            }
            let keys = value.split(",");
            return keys.reduce((prev, curr, index) => {
                prev += list[curr];
                if (index < keys.length - 1) {
                    prev += ",";
                }
                return prev;
            }, "");
        }
    }
};
</script>
<style>
</style>
